
<template>
    <div class="main-view">
        <div class="top-cont">
            <div class="flex ali-c">
                <div class="flex ali-c" v-if="currId!='8e15096a37db4cc299ebe46d58098931'&&currId!='8e15096a67a44807a4e45993a6df542b'">
                    <el-checkbox v-model="isAllChecked" class="mt2" @change="changeAll"></el-checkbox>
                    <span class="ml7 fw">全选</span>
                </div>
                <div class="flex ali-c ml25">
                    <span>排序：</span>
                    <el-select 
                        v-model="sortVal"
                        placeholder="请选择"
                        :popper-append-to-body="false"
                        class="sort-select no-popper-arrow ml7"
                        @change="changeSort"
                    >
                        <el-option
                            v-for="item in sortList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <img 
                        class="top-sort"
                        :class="{'sortInit':!isSortInit}"
                        v-show="sortVal!=0"
                        @click="onSort"
                        src="@/static/images/sort_down.png"
                    >
                </div>
            </div>
            <div class="flex ali-c">
                <img src="@/static/images/collection_blue.png" class="top-icon" @click="toCollect">
                <img src="@/static/images/cart_blue.png" class="top-icon" @click="toCart" v-if="isCart">
            </div>
        </div>
        <ul class="list-cont" v-if="dataList.length>0">
            <li
                v-for="(item,index) in dataList"
                :key="index"
            >   
                <div v-if="currId!='8e15096a37db4cc299ebe46d58098931'&&currId!='8e15096a67a44807a4e45993a6df542b'">
                    <el-checkbox v-model="item.isCheack" class="cont-fl" @change="changeItem"></el-checkbox>
                    <div class="cont-fr">
                        <div class="cont-top twoline">
                            <span class="cont-tag" v-if="labelStr(item).tagNO">{{labelStr(item).tagNO}}</span>
                            <span v-if="labelStr(item).tagEffect&&labelStr(item).tagEffect!='Y'&&labelStr(item).tagEffect!='R'">
                                <span 
                                    v-if="labelStr(item).tagEffect"
                                    class="cont-effect"
                                    :class="{'no-yet':labelStr(item).tagEffect=='W'}"
                                >{{labelStr(item).tagEffectt=='W'?'尚未生效':'已失效'}}</span>
                            </span>
                            <span :class="{'pl7':labelStr(item).tagNO||(labelStr(item).tagEffect&&labelStr(item).tagEffect!='Y'&&labelStr(item).tagEffect!='R')}"></span>
                            <span class="cont-tit" :class="{'no-txt':labelStr(item).tagEffect=='N'}" @click="toPubDetails(item)">
                                <!-- {{labelStr(item).name}} -->
                                <xszk-high-Key :text="labelStr(item).name" :keyWord="keyWord"></xszk-high-Key>
                            </span>
                        </div>
                        <div class="mt20">
                            <div class="fs14 c666 mb7" v-if="labelStr(item).address">{{labelStr(item).address}}</div>
                            <div class="fs14 c666 mb7" v-if="labelStr(item).author">{{labelStr(item).author}}</div>
                            <div class="fs14 c666 mb7" v-if="labelStr(item).number">{{labelStr(item).number}}</div>
                            <div class="fs14 c666 mb7" v-if="labelStr(item).source">{{labelStr(item).source}}</div>
                            <div class="mb7 mr15 flex ali-c jus-b">
                                <div class="fs14 c666">{{labelStr(item).time}}</div>
                                <div class="flex ali-c" style="color:#E8C47B;">
                                    <div class="flex ali-c ml40" v-if="labelStr(item).hot">
                                        <i class="el-icon-view fs20"></i>
                                        <span class="fs14 pl7">{{labelStr(item).hot}}</span>
                                    </div>
                                    <div class="ml40" @click="itemCollect(item)">
                                        <i class="el-icon-star-off fs18 cp"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cont-posi" v-if="labelStr(item).price">
                            <div class="cont-price">{{labelStr(item).price | price}}元</div>
                        </div>
                    </div>
                </div>
                <div v-else class="cont-fr" style="padding-bottom:22px">
                    <div class="flex">
                        <div class="cover-img cp" @click="toPubDetails(item)">
                            <img :src="labelStr(item).coverImg" class="img100">
                        </div>
                        <div>
                            <h3 class="cont-tit tit-width" @click="toPubDetails(item)">
                                <!-- {{labelStr(item).name}} -->
                                <xszk-high-Key :text="labelStr(item).name" :keyWord="keyWord"></xszk-high-Key>
                            </h3>
                            <div class="mt15 max-width twoline" v-if="labelStr(item).desc">{{labelStr(item).desc}}</div>
                            <div class="cont-cell">
                                <div class="fs14 c666 mb7" v-if="labelStr(item).number">{{labelStr(item).number}}</div>
                                <div class="fs14 c666 mb7 flex ali-c"> 
                                    <span v-if="labelStr(item).time">{{labelStr(item).time}}</span>
                                    <span v-if="labelStr(item).frequency" class="ml5"> {{labelStr(item).frequency}}</span>
                                </div>
                                <div class="fs14 c666 mb7" v-if="labelStr(item).subName">{{labelStr(item).subName}}</div>
                                <div class="fs14 c666 mb7" v-if="labelStr(item).author">{{labelStr(item).author}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="icon-posi flex ali-c">
                        <div class="flex ali-c ml40" v-if="labelStr(item).hot">
                            <i class="el-icon-view fs20"></i>
                            <span class="fs14 pl7">{{labelStr(item).hot}}</span>
                        </div>
                        <div class="ml40" @click="itemCollect(item)">
                            <i class="el-icon-star-off fs18 cp"></i>
                        </div>
                    </div>
                    <div class="cont-posi" style="top:55px" v-if="labelStr(item).price">
                        <div class="cont-price">{{labelStr(item).price | price}}元</div>
                    </div>
                </div>
            </li>
        </ul>
        <div v-else class="no-search-main">
            <div v-if="isSearchNull" class="tc">
                <img src="../static/images/search_no.png" class="no-img" >
                <p class="mt15 fs16 c666">无搜索结果</p>
            </div>
        </div>
        <el-pagination
            v-if="currentPage.total > currentPage.size&&currentPage.total != 0"
            class="mt25 mr30 tr"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :pager-count="5"
            :page-sizes="[10, 20, 30]"
            :current-page="currentPage.page"
            :page-size="currentPage.size"
            :total="currentPage.total"
            layout="sizes, prev, pager, next"
        >
        </el-pagination>
        
	</div>
</template>

<script>
export default {
	components: {
        xszkHighKey: (resolve) =>require(["@/components/xszkHighKey",], resolve),
	},
    props:{
        dataList:{
            type:Array, 
            default:()=>[]
        },
        isSearchNull:{
            type:Boolean,
            default: false
        },
        isCart:{
            type:Boolean,
            default: true
        },
        keyWord:{
            type: Array,
            default: ()=>[]
        },

        currentPage:{
            type:Object,
            default: {
                page: 1,
                size: 10,
                total: 0
            }
        }
    },
	computed: {
        classList(){
            return this.$store.getters.classList.slice(1);
        },
    },
	data() {
		return {
            initCoverImg: require('@/static/images/desc_img.jpg'),
            sortList: [
                {value: '0',label: '默认'},
                {value: '1',label: '发布时间'},
                {value: '2',label: '更新时间'},
                {value: '3',label: '价格'},
                {value: '4',label: '热门'}
            ],
            isSortInit:true,
            sortVal: '0',
            isAllChecked:false,
            currId:'',
        };
    },
    methods:{
        labelStr(item){
            // let getId = item.book_info.category_id.split(" ")[1];
            let getName = item.type_name;
            if(getName=='法律文件'){
                getName = '法律法规';
            }else if(getName=='法律观点'){
                getName = '法律文献';
            }else if(getName=='图书'){
                getName = '法律图书';
            }
            let modelObj = {};
            modelObj.name = item.book_info.name;
            modelObj.hot = item.book_info.hot;
            modelObj.price = Number(item.book_info.price);
            switch (getName) {
                case '权威案例':
                    modelObj.tagNO = item.book_info.components['案例编号'];
                    modelObj.source = item.book_info.components['案例出处']?'案例出处：'+item.book_info.components['案例出处']:'';
                    modelObj.time = item.book_info.components['发布时间']?'发布时间：'+item.book_info.components['发布时间']:'';
                    break
                case '法律法规':
                    modelObj.tagEffect = item.book_info.components['效力状态'];
                    modelObj.number = item.book_info.components['发文字号']?'发文字号：'+item.book_info.components['发文字号']:'';
                    modelObj.time = item.book_info.components['发布日期']?'发布时间：'+item.book_info.components['发布日期']:'';
                    break
                case '法律文献':
                    modelObj.author = item.book_info.components['作者']?'作者：'+item.book_info.components['作者']:'';
                    modelObj.source = item.book_info.components['文献出处']?'文献出处：'+item.book_info.components['文献出处']:'';
                    modelObj.time = item.book_info.components['发表时间']?'发布时间：'+item.book_info.components['发表时间']:'';
                    break
                case '裁判文书':
                    modelObj.address = item.book_info.components['审理法院']?'审理法院：'+item.book_info.components['审理法院']:'';
                    modelObj.number = item.book_info.components['案号']?'案号：'+item.book_info.components['案号']:'';
                    modelObj.source = item.book_info.components['裁判出处']?'裁判出处：'+item.book_info.components['裁判出处']:'';
                    modelObj.time = item.book_info.components['判决时间']?'裁判时间：'+item.book_info.components['判决时间']:'';
                    break
                case '文书范本':
                    modelObj.source = item.book_info.components['资源出处']?'资源出处：'+item.book_info.components['资源出处']:'';
                    modelObj.time = item.book_info.components['发表时间']?'发布时间：'+item.book_info.components['发表时间']:'';
                    break
                case '法律图书':
                    modelObj.coverImg = item.book_info.components['封面']?item.book_info.components['封面']:this.initCoverImg;
                    modelObj.time = item.book_info.components['出版日期']?'出版日期：'+item.book_info.components['出版日期']:'';
                    modelObj.number = item.book_info.components['卷册号']?item.book_info.components['卷册号']:'';
                    modelObj.frequency = item.book_info.components['版次']?'版次：'+item.book_info.components['版次']:'';
                    modelObj.subName = item.book_info.components['分辑名']?'分辑名：'+item.book_info.components['分辑名']:'';
                    modelObj.author = item.book_info.components['作者']?item.book_info.components['作者']+' 主办':'';
                    modelObj.price = null;
                    break
                case '课程影音':
                    modelObj.coverImg = item.book_info.components['封面']?item.book_info.components['封面']:this.initCoverImg;
                    modelObj.desc = item.book_info.components['专辑简介']?'简介：'+item.book_info.components['专辑简介']:'';
                    break
                default:
                    break
            }
            return modelObj;
        },
        changeAll(val){
            this.$emit('changeAll',val);
        },
        changeItem(val){
            let isEveryYes =  this.dataList.every(item=> item.isCheack ==true);
            this.isAllChecked = isEveryYes?true:false;
        },
        changeSort(val){
            this.isSortInit = true;
            this.$emit('changeSort',val);
        },
        onSort(){
            this.isSortInit=!this.isSortInit;
            this.$emit('onSort',this.isSortInit,this.sortVal);
        },
        toCollect(){
            this.$emit('toCollect');
        },
        toCart(){
            this.$emit('toCart');
        },
        itemCollect(item){
            this.$emit('itemCollect',item);
        },
        handleCurrentChange(val) {
            this.$emit('handleCurrentChange',val);
        },
        handleSizeChange(val) {
            this.$emit('handleSizeChange',val);
        },
        toPubDetails(item){
            this.$emit('toPubDetails',item);
        }
    },
    created(){
        this.currId = this.$route.query.id;
    }
   
	
};
</script>
<style lang="stylus" scoped>
/deep/.el-checkbox__inner
    width 16px 
    height 16px 
/deep/.sort-select.el-select
    width 78px
    height 22px
/deep/.sort-select .el-input__inner
    font-size 12px
    border 1px solid #979797
    padding 0 6px
    height 22px
    color #333
    border-radius 0
/deep/.sort-select .el-input__suffix
    right 2px
/deep/.sort-select .el-select__caret 
    background url("../static/images/down.png") no-repeat center
    background-size 9px 10px
/deep/.sort-select .el-input__suffix .el-icon-arrow-up:before 
	content: ""
/deep/.sort-select .el-select-dropdown
    width 78px
/deep/.sort-select .el-select-dropdown__item
    text-align center
    font-size 12px
    padding 0 10px
/deep/.sort-select .el-input__icon
    line-height 22px
/deep/.sort-select .el-select-dropdown__item:hover,/deep/.sort-select .el-select-dropdown__item.selected
    color #3266CC
    font-weight normal
.main-view
    width 100%
    min-height 500px
    padding-bottom 25px
    background #fff
    border-radius 4px
    .top-cont
        display flex
        align-items center
        justify-content space-between
        width 100%
        height 50px
        color #4A4A4A
        font-size 16px
        padding 0 12px
        border-bottom 1px solid #ddd
        .top-icon
            margin-right 25px
            width 16px
            height 16px
            flex-shrink 0
            cursor pointer
            opacity 0.75
            &:hover
                opacity 1
        .top-sort
            flex-shrink 0
            width 14px
            height 14px
            margin-left 15px
            cursor pointer
            &.sortInit
                transform rotate(180deg)
    .list-cont li
        padding 21px 24px 0 12px
        position relative
        overflow hidden
        .cont-fl
            float left
            margin-top 6px
        .cont-fr
            float right
            width 884px
            padding-bottom 16px
            border-bottom 1px dashed #DEE1E7
            position relative
            overflow hidden
            .cont-top
                width 700px
                overflow hidden
                line-height 30px
                font-weight bolder
                .cont-tag
                    font-size 16px
                    padding 5px 15px
                    border-radius 4px
                    background #F5E4B2
                .cont-effect
                    min-width 80px
                    padding 5px 8px
                    background #D6D6D6
                    color #fff
                    font-size 16px
                    border-radius 4px
                    &.no-yet
                        background #353539
                        color #FFD98B
            .cont-tit
                font-size 18px
                color #112C71
                cursor pointer
                transition all 0.2s
                &:hover,&:hover>>>span
                    color #E8C47B !important
                &.no-txt
                    color #999
                &.tit-width
                    width 540px
                    line-height 30px
            .cont-cell
                width 100%
                height 138px
                display table-cell
                vertical-align bottom
            .max-width
                width 540px
            .cont-posi
                position absolute
                right 16px
                top 25px
                z-index 9 
                .cont-price
                    color #F56060
                    font-size 20px
                    font-weight bolder
            .icon-posi
                position absolute
                right 16px
                bottom 25px
                z-index 9 
                color #E8C47B
            .yy-icon
                width 16px
                height 15px
                background url('../static/images/yy2.png') no-repeat center
                background-size 100% 100%
                cursor pointer
                transition all 0.3s
                &.active
                    background url('../static/images/yy1.png') no-repeat center
                    background-size 100% 100%
            .cover-img
                width 120px
                height auto
                margin-left 5px
                margin-right 77px
                background #f2f2f2
                overflow hidden
    .no-search-main
        width 100%
        height 650px
        display flex
        align-items center
        flex-direction column
        .no-img
            margin-top 112px
            width 300px
            height auto
        
</style>